<template>
  <div class="app-container dialog-w80">

    <div class="customContainer ">
      <!-- 搜索头 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
        <el-form-item>
          <el-checkbox true-label="1" false-label="0" v-model="formInline.look_del" @change="lookDelChange" border>
            查看已删门店
          </el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-date-picker v-model="pickerDate" value-format="yyyy.MM.dd" type="daterange" align="right" unlink-panels range-separator="-"
            start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-select filterable placeholder="选择门店" v-model="formInline.store_id" @change="storeChange">
            <el-option v-for="item in store_list" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select placeholder="选择" v-model="formInline.house_id" class="w160" @change="houseChange">
            <el-option v-for="item in houseList" :key="item.house_id" :label="item.house_name" :value="item.house_id"></el-option>
          </el-select>
          <el-input v-if="formInline.type==2" v-model="formInline.order_id" placeholder="请输入订单号" class="w160">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-select placeholder="选择" v-model="formInline.purpose" class="w160">
            <el-option v-for="item in purpose_list" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <dj-button size="small" @search="searchClick" />
        </el-form-item>
      </el-form>
      <!-- 列表 -->
      <el-table highlight-current-row :data="list" v-loading.body="listLoading" border size="small">
        <el-table-column align="center" label="礼品图片" width="80">
          <template slot-scope="scope">
            <img :src="scope.row.thumb" width="60" height="60" alt="">
          </template>
        </el-table-column>
        <el-table-column align="center" label="新礼品编号" prop="gift_id"></el-table-column>
        <el-table-column align="center" label="神采礼品编号" prop="no_obsolete"></el-table-column>
        <el-table-column align="center" label='礼品名称' prop="gift_name"></el-table-column>
        <el-table-column align="center" label="箱规" prop="box_num"></el-table-column>
        <el-table-column align="center" label='尺寸' prop="size"></el-table-column>
        <el-table-column align="center" label='出库数' prop="num"></el-table-column>
        <el-table-column align="center" label='礼品成本价（元）'>
          <template slot-scope="scope">
            <!-- 保留小数 -->
            {{scope.row.money_cost|keepTwoNum}}
          </template>
        </el-table-column>
        <el-table-column align="center" label='礼品成本总价（元）'>
          <template slot-scope="scope">
            {{scope.row.num*scope.row.money_cost|keepTwoNum}}
          </template>
        </el-table-column>
        <el-table-column align="center" label='礼品出库仓' prop="house_name"></el-table-column>
        <el-table-column align="center" label='出库类型'>
          <template slot-scope="scope">
            {{scope.row.purpose?scope.row.purpose:'-'}}
          </template>
        </el-table-column>
        <el-table-column align="center" label='出库时间' prop="date"></el-table-column>
        <el-table-column align="center" label="备注">
          <template slot-scope="scope">
            {{scope.row.remark?scope.row.remark:'-'}}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 自定义底部 -->
    <div class="bottom_box">
      <el-pagination class="pull-left" background @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="20"
        layout="prev, pager, next, jumper" :total="totalDataNumber">
      </el-pagination>
      <div class="pull-right">
        <span>总出库数：{{num}}&#x3000;总成本价：{{cost_totle}}&#x3000;</span>
        <el-button type="primary" size="small" @click="exportClick()" :loading="exportLoading">报表导出
          <count-down ref="cd" />
        </el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { getList, getPage, storeList, houseList, getExport } from '@/api/storage_control/sundryOutput_form';
import { pickerOptionsF, pickerDateF, optionMaxTime } from '@/utils';
export default {
  data() {
    return {
      exportLoading: false,
      cost_totle: '',
      num: '',
      houseList: [],
      all_purpose_list: [
        { id: 1, name: '破损报废' },
        { id: 3, name: '办公领用' },
        { id: 4, name: '公关领用' },
        { id: 5, name: '企划活动' },
        { id: 6, name: '总部领用' },
        { id: 7, name: '辅助用品出仓' },
        { id: 8, name: '退合作商' },
        { id: 9, name: '退供应商/总部' },
        { id: 10, name: '氛围活动' },
        { id: 11, name: '销售活动' }
      ],
      purpose_list: [],
      list: null,
      listLoading: false,
      detail_dialog: false,
      currentPage: 1,
      totalDataNumber: 0,
      store_list: null,
      exportForm: [],
      formInline: {
        time_begin: '',
        time_end: '',
        purpose: '',
        store_id: '',
        order_id: '',
        house_id: '',
        type: '1',
        look_del: '0'
      },
      pickerOptions: pickerOptionsF(),
      pickerDate: pickerDateF()
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      if (!vm.store_list) {
        vm.getstore();
      }
    });
  },
  methods: {
    lookDelChange() {
      this.getstore();
    },
    houseChange() {
      let checkPurpose = this.houseList.find(item => {
        return item.house_id == this.formInline.house_id;
      });
      if (checkPurpose.is_store_main == 1) {
        this.purpose_list = this.all_purpose_list.filter((item, i) => {
          return item.id < 10;
        });
      } else {
        this.purpose_list = this.all_purpose_list.filter((item, i) => {
          return item.id > 9;
        });
      }
      this.formInline.purpose = this.purpose_list[0].id;
    },
    storeChange() {
      this.getHouse();
    },
    getstore() {
      storeList({ look_del: this.formInline.look_del, category_id: 171 }).then(response => {
        this.store_list = response;
        let data = response.filter(res => res.id == this.$store.getters.optionId);
        if (data.length > 0) {
          this.formInline.store_id = data[0].id;
        }
        this.getHouse();
      });
    },
    getHouse() {
      houseList({ category_id: 171, store_id: this.formInline.store_id, cang: 4 }).then(response => {
        this.houseList = response;
        this.formInline.house_id = response[0].house_id;
        this.houseChange();
      });
    },
    // 选择
    handleSelectionChange(val) {
      this.exportForm = val;
    },
    // 导出
    exportClick() {
      getExport(this.formInline);
      this.exportLoading = true;
      this.$refs.cd.countDownF(30).then(() => {
        this.exportLoading = false;
      });
    },
    // 搜索
    searchClick() {
      if (!this.formInline.store_id) {
        this.$message({ type: 'error', message: '请选择门店' });
        return;
      }
      optionMaxTime(this.pickerDate).then(() => {
        //最大可选择时间区间
        this.formInline.time_begin = this.pickerDate[0];
        this.formInline.time_end = this.pickerDate[1];
        this.fetchData();
      });
    },
    // 列表获取
    fetchData() {
      this.listLoading = true;
      this.currentPage = 1;
      getPage(this.formInline)
        .then(response => {
          this.totalDataNumber = response.page * 20;
          this.cost_totle = response.cost_totle;
          this.num = response.num;
          getList(this.formInline).then(response => {
            if (response.length > 0) {
              this.list = response;
            } else {
              this.list = [];
            }
            this.listLoading = false;
          });
        })
        .catch(res => {
          this.listLoading = false;
        });
    },
    handleCurrentChange(val) {
      this.listLoading = true;
      getList(this.formInline, val).then(response => {
        this.list = response;
        this.listLoading = false;
      });
    }
  }
};
</script>